import { FC } from "react";
import { Routes, Route, Navigate, useLocation } from 'react-router-dom'

import Index from './layout/Index'
import { useAppSelector } from "./store/hooks";
import {Index as Login} from './views/login/Index'

type AppProps = {}

const App: FC = (props: AppProps) => {

  const loginState = useAppSelector(state => state.user.loginState)

  const {search} = useLocation() // ?r=/pro/list
  const redirectUrl = search.split('?r=')[1]
  const str = redirectUrl ? redirectUrl : '/'
  return (
    <Routes>
      {/* 
        路由v6版本中：关键点就在于 * ，代表 后续的路由的设定 交给 Index 组件处理
        路由v5版本中：不需要添加 *
        v5版本中 使用 Switch 代替 v6中的 Routes
        v5版本中 使用 component 属性代替  v6中的 element
      */}
      <Route path="/login" element = { loginState ? <Navigate to={str} /> : <Login /> } />
      <Route path="/*" element = { loginState ? <Index /> : <Navigate to="/login" /> } />
    </Routes>
  )
}

export default App